/* <!-- 第七题大题 --> */
 /* 
 + 绑定合适的事件处理函数，实现以下逻辑：
 + 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
 + 当用户去掉“全不选”时，自动不选中所有语言；
 + 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
 + 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
 + 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
  */
 var
     form = $('#test-form'),
     langs = form.find('[name=lang]'),
     selectAll = form.find('label.selectAll :checkbox'),
     selectAllLabel = form.find('label.selectAll span.selectAll'),
     deselectAllLabel = form.find('label.selectAll span.deselectAll'),
     invertSelect = form.find('a.invertSelect');
 // 重置初始化状态:
 form.find('*').show().off();
 form.find(':checkbox').prop('checked', false).off();
 deselectAllLabel.hide();
 // 拦截form提交事件:
 form.off().submit(function (e) {
     e.preventDefault();
     alert(form.serialize());
 });
 // TODO:绑定事件
 //全选


 selectAllLabel.on('click',function(){
     //要先获取到全选的状态，true或false，进入判断
     if(!selectAll.prop('checked')){

        langs.prop({checked:true});
        
        selectAllLabel.hide();

        deselectAllLabel.show();
        
     }else{
        langs.prop({checked:false});
     }

 })

//全不选
 deselectAllLabel.on('click',function(){
     if(!selectAll.prop('checked')){
        langs.prop({checked:true});
     }
     else{
        langs.prop({checked:false});
        
        deselectAllLabel.hide();
    
        selectAllLabel.show();
 
    }
 })


 
var
     form = $('#test-form'),
     langs = form.find('[name=lang]'),
     selectAll = form.find('label.selectAll :checkbox'),
     selectAllLabel = form.find('label.selectAll span.selectAll'),
     deselectAllLabel = form.find('label.selectAll span.deselectAll'),
     invertSelect = form.find('a.invertSelect');
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
// TODO:绑定事件

//全选

/*
selectAllLabel为上面定义的参数，直接定位到我们全选所在的span标签所在的层级，
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数，这里时间名字为click点击事件
*/
selectAllLabel.on('click',function(e){

/*
    这里进行判断，使用prop方法，prop()方法用于检索属性值，我们判断checked复选框状态，也就是这个复选框的状态的值为true或者false，true为✔false为空
    //小提示：检索 HTML 属性，请使用 attr() 方法代替；如果是移除属性，则使用 removeProp() 方法。
    !的意思：当selectAll里面的checked值为空的时候我们进入这个判断，原先的checked值可能是为空的(true或者false，false就是为空)
*/
if(!selectAll.prop('checked')) {   

    /**
    langs为我们上面定义的参数，即定位到我们下面选择想要学习的编程语言的name属性，还是进行检索判断，
    直接定义为true，因为全选的话就是所有的复选框全打勾
    */
    langs.prop({checked:true}); 

    /**
     * 实现了以上全选的效果后，我们需要隐藏我们的全选，（题目要求）hide()方法就是隐藏
     */
    selectAllLabel.hide();

    /**
     * 隐藏全选后显示我们的不全选，使用show()方法
     */
    deselectAllLabel.show();

/**
 * 如果不是全选则为false值，即为空
 */
}else{ 
    langs.prop({checked:false});
}

});


//取消全选

/**
* deselectAllLabel为我们上面定义的变量，直接定义到不全选的span标签所在的层级
* 使用on依旧选择click点击事件
*/
deselectAllLabel.on('click',function(e){
/**
* 判断如果checked值为空的时候进入这个判断，即单点复选框会打勾
*/
if(!selectAll.prop('checked')) {   
    langs.prop({checked:true}); 
}else{ 

    /**
     * 这里langs定位到我们下面选择想要学习的编程语言的name属性，因为是全不选，所以为false值，为空
     */
    langs.prop({checked:false});
    /**
     * 根据题目要求，全不选隐藏
     */
    deselectAllLabel.hide();

    /**
     * 全不选隐藏，全选显示出来
     */
    selectAllLabel.show();
}


});

//反转

/**
* invertSelect为上面定义的参数，直接定位到反选所在的层级，依旧选择click点击事件
*/
    invertSelect.on('click',function () {
    //遍历langs  
        langs.each(function () {
    //判断复选框状态为false时为什么事件
            if (this.checked) {
    //检索当前获取的复选框状态，如果为false值
                $(this).prop('checked', false);
    //隐藏不全选文本
                deselectAllLabel.hide();
    //检索全选框的状态，如果为false值           
                selectAll.prop('checked', false);
    //显示全选文本        
                selectAllLabel.show();
            } else {
    //else判断复选框状态为true时的事件
                this.checked = true;
    //计算当前为true的值            
                count = 0;
    //遍历langs
                langs.each(function () {
    //如果有这个复选框状态为true，那么就加1           
                     if (this.checked)
                        count++;
                })
    //如果算出来的复选框状态为true的数量等于现有的复选框数量，那么我们就显示不全选文本，隐藏全选文本
                if (count == yuanchangdu) {
                    selectAll.prop('checked', true);
                    deselectAllLabel.show();
                    selectAllLabel.hide();
                }
            }
        })
    })

//定义一个用来存放计算复选框数量的变量
    var count = 0,
//定义原先复选框的总长度
    yuanchangdu = langs.length;
//设置计算复选框的点击数量
    langs.click(function () {
        count = 0;
//遍历langs复选框的状态        
        langs.each(function () {
            if (this.checked)
                count++;
        })
//如果所有的复选框状态都是为true那么我们就隐藏全选文本，显示不全选的文本
        if (count ==  yuanchangdu) {
            selectAll.prop('checked', true);
            deselectAllLabel.show();
            selectAllLabel.hide();
        } else {
    //如果所有的复选框状态都是为false那么我们就隐藏不全选文本，显示全选的文本
            selectAll.prop('checked', false);    
            selectAllLabel.show();
            deselectAllLabel.hide();

        }
    })


// 测试:
console.log('请测试功能是否正常。');
